[V0_FILE]typescriptreact:file="app/data/integrations.ts" isEdit="true" isMerged="true" import { Zap, ShoppingCart, BarChart, Mail, Calendar, FileText, CreditCard, Phone, Video, Cloud, Globe, Shield, Camera, Music, Book, Briefcase, Coffee, Cpu, Database, Headphones, Heart, Image, Key, Laptop, Map, Printer, Rocket, Scissors, Truck, Wifi, } from "lucide-react" import type React from "react" export type Integration = { id: string name: string description: string category: string icon: React.ComponentType color: string } export const categories = [ "All", "Analytics", "Marketing", "Productivity", "Sales", "Finance", "Communication", "Cloud Services", "Security", "Design", "Development", "Human Resources", "Customer Support", "E-commerce", "Social Media", ] const iconMap = { Zap, ShoppingCart, BarChart, Mail, Calendar, FileText, CreditCard, Phone, Video, Cloud, Globe, Shield, Camera, Music, Book, Briefcase, Coffee, Cpu, Database, Headphones, Heart, Image, Key, Laptop, Map, Printer, Rocket, Scissors, Truck, Wifi, } const colorPalette = [ "#FF4A00", "#96BF48", "#E37400", "#FFE01B", "#F06A6A", "#FFCC22", "#6772E5", "#F22F46", "#2D8CFF", "#0061FF", "#00A1E0", "#D32D27", "#4CAF50", "#9C27B0", "#FF9800", "#795548", "#607D8B", "#3F51B5", "#00BCD4", "#FFC107", ] function generateIntegrations(count: number): Integration[] { const integrations: Integration[] = [] const iconKeys = Object.keys(iconMap) for (let i = 0; i < count; i++) { const iconKey = iconKeys[Math.floor(Math.random() * iconKeys.length)] const category = categories[Math.floor(Math.random() * (categories.length - 1)) + 1] // Exclude 'All' const color = colorPalette[Math.floor(Math.random() * colorPalette.length)] integrations.push({ id: `${i + 1}`, name: `Integration ${i + 1}`, description: `This is a detailed description for Integration ${i + 1}. It provides ${category.toLowerCase()} services to streamline your workflow and improve efficiency. With powerful features and easy integration, it's an essential tool for modern businesses looking to optimize their operations and stay ahead in the competitive market.`, category, icon: iconMap[iconKey], color, }) } return integrations } export const integrations = generateIntegrations(1000) [V0_FILE]typescriptreact:file="app/integrations/components/SearchBar.tsx" isEdit="true" isMerged="true" import { Input } from "@/components/ui/input" import { Search } from "lucide-react" type SearchBarProps = { onSearch: (query: string) => void } export default function SearchBar({ onSearch }: SearchBarProps) { return (

onSearch(e.target.value)} />

) } [V0_FILE]typescriptreact:file="app/integrations/components/IntegrationCard.tsx" isEdit="true" isMerged="true" import type { Integration } from "../../data/integrations" import { Card, CardContent } from "@/components/ui/card" type IntegrationCardProps = { integration: Integration } export default function IntegrationCard({ integration }: IntegrationCardProps) { const Icon = integration.icon return (

{integration.name}

{integration.description.length > 150 ? `${integration.description.substring(0, 150)}...` : integration.description}

) } [V0_FILE]typescriptreact:file="app/integrations/page.tsx" isEdit="true" "use client" import { useState, useMemo } from "react" import { categories, integrations } from "../data/integrations" import CategoryFilter from "./components/CategoryFilter" import SearchBar from "./components/SearchBar" import IntegrationGrid from "./components/IntegrationGrid" import Pagination from "./components/Pagination" const ITEMS_PER_PAGE = 30 export default function IntegrationsPage() { const [selectedCategory, setSelectedCategory] = useState("All") const [searchQuery, setSearchQuery] = useState("") const [currentPage, setCurrentPage] = useState(1) const filteredIntegrations = useMemo(() => { return integrations.filter((integration) => { const categoryMatch = selectedCategory === "All" || integration.category === selectedCategory const searchMatch = integration.name.toLowerCase().includes(searchQuery.toLowerCase()) || integration.description.toLowerCase().includes(searchQuery.toLowerCase()) return categoryMatch && searchMatch }) }, [selectedCategory, searchQuery]) const totalPages = Math.ceil(filteredIntegrations.length / ITEMS_PER_PAGE) const paginatedIntegrations = filteredIntegrations.slice( (currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE, ) return (

{ setSelectedCategory(category) setCurrentPage(1) }} />

Integrations

{ setSearchQuery(query) setCurrentPage(1) }} />

) } [V0_FILE]typescriptreact:file="app/integrations/components/CategoryFilter.tsx" isEdit="true" import { Button } from "@/components/ui/button" type CategoryFilterProps = { categories: string[] selectedCategory: string onSelectCategory: (category: string) => void } export default function CategoryFilter({ categories, selectedCategory, onSelectCategory }: CategoryFilterProps) { return ( ) } [V0_FILE]typescriptreact:file="app/integrations/components/IntegrationGrid.tsx" isEdit="true" import type { Integration } from "../../data/integrations" import IntegrationCard from "./IntegrationCard" type IntegrationGridProps = { integrations: Integration[] } export default function IntegrationGrid({ integrations }: IntegrationGridProps) { return (

{integrations.map((integration) => ( ))}

) } [V0_FILE]typescriptreact:file="app/integrations/components/Pagination.tsx" isEdit="true" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" type PaginationProps = { currentPage: number totalPages: number onPageChange: (page: number) => void } export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) { return (

Page {currentPage} of {totalPages}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This